<template>
	<view class="u-page" style="padding-bottom: 200rpx;">

		<view class="u-demo-block__content">
		    <view class="u-demo-block__content">
		        <u-row customStyle="margin-bottom: 10px">
		            <u-col span="8">
		                <view class="div1">
							<view class="div2">
								{{patient.name}}
								<u-tag v-bind:text="patient.relation"  shape="circle" class="tag1"></u-tag><br>
								{{patient.number}}
							</view>
							<view style="width: 130rpx;height: 50rpx;float: right;font-size: 4rpx;" @click="cutShow()">
							<view style="width: 50rpx;height: 50rpx;background-color: #000000;margin: 0 auto;"></view>
								切换就诊人
							</view>
						</view>
		            </u-col>
		        </u-row>
		    </view>
			<view style="width: 90%;margin: 50rpx 5%;">
				<view class="div520">近一年</view>
				<view class="div521" @click="cutShow2()">选择时间</view>
			</view>
			<view style="width: 90%;margin:0 5%;">
				<view v-for="record in records" class="u-demo-block__content div3">
					<view class="div4">
						<span class="span1">{{record.diagnosticTime}}</span>
					</view>
					<view style="">
						<span style="float:left">医生: <span style="margin-left: 45rpx;display: inline-block;">{{record.doctorName}}</span></span>
					</view><br>
					<view>
						<span style="float:left">就医人:<span style="margin-left: 20rpx;display: inline-block;">{{patient.name}}</span></span>
					</view><br>
					<view >
						<span style="float:left">诊断 :<span style="margin-left: 40rpx;display: inline-block;">{{record.diagnosis}}</span></span>
					</view><br>
					<view class="div4" style="padding-top: 6rpx;">
						
					</view>
					<view>
						<button style="width: 160rpx; font-size: 20rpx;color: white;background-color: #007AFF;float: right;margin-right: 30rpx;" @click="checkMedicalRecords(record.id)">查看病例</button>
					</view>
				</view>
			</view>
			
			
		</view>
		
		
		<!-- 切换就诊人弹出框 -->
			<u-popup  ref="popup" :show="isCut" mode="bottom" @close="cutDate" class="homepage">
				<view class="popopBox">
					<scroll-view
						scroll-y="true"
						style="height: 50rpx;"
						scroll-with-animation="true"
					>
					</scroll-view>
					<view @click="cutPatient(patient)" class="flex-row wrapper" v-for="patient in patients" style="margin: 20rpx 5rpx;
		padding: 10rpx;background-color: #E5E5E5;">
						<view class="flex-col flex-row wraper-col">
							<view class="flex-row box">
								<view style="float: left;margin-right: 10rpx;">{{patient.name}}</view>
								<view style="padding: 5rpx 15rpx;background-color: #3289FF;display: inline-block;border-radius: 10rpx;">
									<view style="">{{patient.relation}}</view>
								</view>
							</view>
							<view class="u-line-1 text-three">{{patient.number}}</view>
						</view>
					</view>
				</view>
			</u-popup>
			
			<!-- 选择时间查询-->
			<u-popup  ref="popup" :show="isCut2" mode="bottom" @close="cutDate2()" class="homepage">
				<view class="popopBox">
					<scroll-view
						scroll-y="true"
						style="height: 50rpx;"
						scroll-with-animation="true"
					>
					</scroll-view>
					
					<view>
						<view>选择起止时间</view>
						<!-- <uni-section :title="'日期时间范围用法：' + '[' + datetimerange + ']' " type="line"></uni-section> -->
						<view class="example-body">
							<uni-datetime-picker v-model="datetimerange" type="daterange" rangeSeparator="至" />
						</view>
						<button class="button" @click="submit">确认</button>
					</view>
					
				</view>
			</u-popup>
	</view>

</template>

<script>
	import {msg} from '@/utils/utils.js'
	import request from '@/utils/requestConfig.js'
	export default{
		data(){
			return{
				date:'',
				startDate:'',
				endDate:'',
				isCut:false,
				isCut2:false,
				patient:{},
				patients:[],
				userId:uni.getStorageSync('user').id,
				
				datetimerange:[],
				datetimerangeOneYear:[new Date(),new Date().setFullYear(new Date().getFullYear()-1)],
				
				records:[
					// {
						
					// 	diagnosticTime: new Date(),
					// 	doctorName: "张大夫",
					// 	diagnosis: "感冒"
					// },
					// {
					// 	diagnosticTime: new Date(),
					// 	doctorName: "张大夫",
					// 	diagnosis: "感冒"
					// },
					// {
					// 	diagnosticTime: new Date(),
					// 	doctorName: "张大夫",
					// 	diagnosis: "感冒"
					// }
				]
			}
		},
		created() {
			this.findPatientByUserId()
			//this.sleep(1000)
			
		},
		methods:{
			submit(){
				if(this.datetimerange.length==2){
					let t=this.datetimerange[0]
					this.datetimerange[0]=this.datetimerange[1]
					this.datetimerange[1]=t

					this.getMedicalRecords(this.datetimerange)
					this.cutShow2();
				}else{
					this.cutShow2();
					uni.showToast({
						icon:'error',
						title:'未选择'
					})
				}
				
			},
			
			cutShow(){
				this.isCut=!this.isCut
				this.qie()
			},
			cutShow2(){
				this.isCut2=!this.isCut2
			},
			cutDate(){
				this.isCut=!this.isCut
				this.qie()
			},
			cutDate2(){
				this.isCut2=!this.isCut2
			},
			cutPatient(patient){
				this.patient=patient
				this.isCut=!this.isCut
				this.getMedicalRecords(this.datetimerangeOneYear)
				this.qie()
			},
			qie(){
				console.log("切换就诊人")
			},
			/* 获取当前登录用户的病人列表 */
			findPatientByUserId(){
				request.post('/user/user/the-patient/findPatientByUserId',{userId:this.userId},false).then((res)=>{
					
					let tagList=res.data.thePatientList
					this.patients=tagList
					for(let i=0;i<tagList.length;i++){
						let tag=tagList[i]
						if(tag.defaultPerson=="是"){
							this.patient=tag
							this.getMedicalRecords(this.datetimerangeOneYear)
							//alert(this.patient.hospitalNumber)
							
							// console.error(this.patient)
						}
					}
					
					uni.hideLoading();
				}).catch((error)=>{
					
					console.log(error)
				})
				
				
				
			},
			/* 获取病历列表 */
			getMedicalRecords(dateRange){

				let a=new Date(dateRange[1]); 
				let data={"patientId":this.patient.id,"startDate":a,"endDate":dateRange[0]}
				//console.log(data)
				request.post('/other/other/medical-records/getMedicalRecords',data,true).then((res)=>{
					//console.log(res)
					this.records=res.data.list
					uni.hideLoading();
				}).catch(error=>{
					console.error(error)
				})
			},
			/* 查看详细病状 */
			checkMedicalRecords(id){
				console.log(666)
				uni.setStorageSync("id",id)
				uni.navigateTo({
					url: '/pages/appointment/medicalRecordDetails',
				})
			}
		}
	}
</script>

<style scoped>
.div1{
	width:600rpx;
	background-color: #f3f8ff;
	border:f4f4f5 solid 1rpx;
	border-radius: 15px;
	margin-left:10px;
	margin-top:10px;
	padding: 50rpx;
}
.div2{
	color: #b1b2b4;
	float: left;
}
.div3{
	height: 390rpx;
	width:630rpx;
	margin-left:0px;
	margin-top:20px;
	padding: 12rpx 22rpx;
	border:f4f4f5 solid 1rpx;
	border-radius: 6px;
	box-shadow: #bebfc1 1rpx 1rpx 20rpx;
	font-size: 28rpx;
	clear: both;
}
.div3 div{
	display: block;
}
.div4{
	border-bottom: #E1E1E1 1rpx solid;
	padding: 30rpx 0;
	margin-bottom: 20rpx;
}
.tag1{
	display: inline-block;
	color: #3289ff;
	margin-left: 10px;
	
	/* background-color: #3289ff; */
}
.div520{
	color: white;
	font-size: 28rpx;
	display: inline-block;
	padding: 10rpx 25rpx;
	border-radius: 40rpx;
	background-color: #007AFF;
	margin-right: 40rpx;
}
.div521{
	color: #007AFF;
	font-size: 28rpx;
	display: inline-block;
	padding: 10rpx 25rpx;
	border-radius: 40rpx;
	background-color: #9ACAFC;
}
</style>
